<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件12</title>
    <script src="../../js/vue3.js"></script>
    <style>
        #app {
            margin: 5rem auto;
            width: 30%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            border: 1px gray solid;
            text-align: center;
        }
        .row{
            display: flex;
            justify-content: space-around;
        }
        .row>div{
            width: 33%;
            background-color: lightgray;
            border: 1px gray solid;
           
            padding: 1rem;
        }
        .content{
            height: 5rem;
            padding: 1rem;
        }
        
      
    </style>
</head>

<body>
    <!-- 运行 -->
    <div id="app">
        <fa></fa>
    </div>
    <!-- 模版 -->
    <template id="fas">
       
        <div class="box">
            <div class="row">
                <div @click="choose_1">猞猁</div>
                <div @click="choose_2">雪豹</div>
                <div @click="choose_3">狍子</div>
            </div>
            <div class="content">
                <component :is="choose"></component>
            </div>
        </div>
    </template>
    <template id="animal_1">
        <p>芝士猞猁</p>
    </template>
    <template id="animal_2">
        <p>芝士雪豹</p>
    </template>
    <template id="animal_3">
        <p>芝士狍子</p>
    </template>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {}
            },
            components: {
                fa: {
                    template: "#fas",
                    data() {
                        return {
                            choose:"animal_1"
                        }
                    },
                    methods:{
                        choose_1(){
                            this.choose = "animal_1"
                        },
                        choose_2(){
                            this.choose = "animal_2"
                            console.log(this.choose)
                        },
                        choose_3(){
                            this.choose = "animal_3"
                        }
                    },
                    components: {
                        animal_1: {
                            template: "#animal_1",
                        },
                        animal_2: {
                            template: "#animal_2",
                        },
                        animal_3: {
                            template: "#animal_3",
                        },
                    }
                }
            }
        });

        v_app.mount("#app");
    </script>
</body>

</html>